﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>实现底图的切换</title>
    <link href="http://localhost/arcgis_js_api/library/3.23/3.23/esri/css/esri.css"
        rel="stylesheet" type="text/css" />
    <link href="http://localhost/arcgis_js_api/library/3.23/3.23/dijit/themes/tundra/tundra.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.23/3.23/init.js">
    </script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .MapClass {
            width: 100%;
            height: 100%;
            margin: auto;
            position: relative;
        }

        .BaseMapClass {
            width: 462px;
            height: 80px;
            margin: 0px;
            padding: 0px;
            position: absolute;
            bottom: 45px;
            right: 0px;
            z-index: 50;
        }

        #FirstBaseMapDiv {
            border-color: red;
        }

        .BaseMapDivClass {
            padding: 0px;
            width: 150px;
            margin-left: 1px;
            margin-right: 1px;
            height: 100%;
            z-index: 100;
            border: 1px solid black;
            float: left;
            cursor: pointer;
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0.8;
        }
    </style>
    <script type="text/javascript">

        function LoadBaseMap(divId, mapUrl) {
            var MyMap;
            var MyTiledMapServiceLayer;
            $('#MyMapDiv').empty();
            dojo.require("esri.map");
            dojo.addOnLoad(function () {
                MyMap = new esri.Map("MyMapDiv");
                MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(mapUrl);
                MyMap.addLayer(MyTiledMapServiceLayer)
            })

            dojo.require("esri.dijit.OverviewMap");
            dojo.addOnLoad(function OverviewMap() {
                var over = {
                    map: MyMap,
                    attachTo: "top-right",
                    visible: true,
                    color: "#D84E13",
                    expandFactor: 2,
                    width: 200,
                    height: 112,
                    baseLayer: MyTiledMapServiceLayer,
                };
                var MapViewer = new esri.dijit.OverviewMap(over, dojo.byId("OverViewDiv"));
                MapViewer.startup();
            })

            dojo.require("esri.dijit.Scalebar");
            dojo.addOnLoad(function Scalebar() {
                var scalebar = new esri.dijit.Scalebar(
                    {
                        map: MyMap,
                        attachTo: "bottom-left",
                        scalebarUnit: "metric",

                    }, dojo.byId("scaleBarDiv"))
            })

            $('.BaseMapDivClass').css({ "border-color": "black", "opacity": "0.8" });
            var id = "";
            id = '#' + divId;
            $(id).css({ "border-color": "red", "opacity": "1" });
        };
        LoadBaseMap('FirstBaseMapDiv',
            'http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer');
    </script>
    <meta charset="utf-8" />
</head>
<body class="tundra">
    <div id="MyMapDiv" class="MapClass">
    </div>
    <div id="BaseMapDiv" class="BaseMapClass">
        <div id="FirstBaseMapDiv" class="BaseMapDivClass" style="background: url('image/ESRI_StreetMap_World_2D.png'); background-size: 100% 100%;"
            onmousedown="LoadBaseMap('FirstBaseMapDiv','http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer');">
        </div>
        <div id="SecondBaseMapDiv" class="BaseMapDivClass" style="background: url('image/ESRI_Imagery_World_2D.png'); background-size: 100% 100%;"
            onmousedown="LoadBaseMap('SecondBaseMapDiv','http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer');">
        </div>
        <div id="ThridBaseMapDiv" class="BaseMapDivClass" style="background: url('image/NGS_Topo_US_2D.png'); background-size: 100% 100%;"
            onmousedown="LoadBaseMap('ThridBaseMapDiv','http://services.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer');">
        </div>
    </div>
</body>
</html>
